<template>
    <div class="revenue_form">
        <div class="com_box pd_box">
            <div class="pro_title">项目信息</div>
            <el-form-item label="项目名称" prop="project_name" :rules="{required: true, message: '请输入项目名称', trigger: ['blur', 'change']}">
                <el-input v-model="editForm.project_name" placeholder="项目名称" style="width:200px" @change="setSessionStorage">
                </el-input>
            </el-form-item>
            <el-form-item label="品牌名称" prop="brand_name" :rules="{required: true, message: '请输入品牌名称', trigger: ['blur', 'change']}">
                <el-input v-model="editForm.brand_name" placeholder="品牌名称" style="width:200px" @change="setSessionStorage">
                </el-input>
            </el-form-item>
            <el-form-item label="产品名称" prop="product_name" :rules="{required: true, message: '请输入产品名称', trigger: ['blur', 'change']}">
                <el-input v-model="editForm.product_name" placeholder="产品名称" style="width:200px" @change="setSessionStorage">
                </el-input>
            </el-form-item>
            <el-form-item label="项目人员">
                <div class="member_box">
                    <div class="font_13 color_02">请选择负责该项目的人员</div>
                    <div class="flexbox flexcenter member_item" v-for="(item,index) in editForm.member" :key="index">
                        <el-form-item :prop="`member.${index}.user_id`" :rules="{required: true, message: '请选择人员', trigger: ['blur', 'change']}">
                            <el-select v-model="item.user_id" filterable placeholder="请选择人员" style="width:220px" @change="setSessionStorage">
                                <el-option :label="item.nickname" :value="item.id" v-for="item in userList" :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <template v-if="item.priority==0">
                            <div class="icon_btn"><img src="../../assets/img/del_icon2.svg" alt="" @click="delUser(index)"></div>
                        </template>
                        <template v-else>
                            <div class="member_tag" v-if="item.priority==1">媒介</div>
                            <div class="member_tag" v-else-if="item.priority==2">内容</div>
                            <div class="member_tag" v-else-if="item.priority==3">项目经理</div>
                        </template>
                    </div>
                    <el-button size="medium" style="margin-top:12px" type="text" icon="el-icon-plus" @click="addUser">添加人员</el-button>
                </div>
            </el-form-item>
        </div>
        <div class="com_box pd_box">
            <div class="pro_title">角色奖金比例</div>
            <el-form-item label="媒介" prop="media_worker_ratio" :rules="addRules.checkFloat" @change="setSessionStorage">
                <el-input v-model="editForm.media_worker_ratio" placeholder="请设置" style="width:220px">
                    <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                </el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content_worker_ratio" :rules="addRules.checkFloat" @change="setSessionStorage">
                <el-input v-model="editForm.content_worker_ratio" placeholder="请设置" style="width:220px">
                    <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                </el-input>
            </el-form-item>
            <el-form-item label="客户经理" prop="project_manager_ratio" :rules="addRules.checkFloat" @change="setSessionStorage">
                <el-input v-model="editForm.project_manager_ratio" placeholder="请设置" style="width:220px">
                    <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                </el-input>
            </el-form-item>
        </div>
        <div class="com_box pd_box">
            <div class="pro_title">星图服务费</div>
            <el-form-item label="星图账户" prop="xingtu">
                <div class="flexbox com_select">
                    <div class="scence_left">
                        <div class="scence_head flexbox flexcenter">
                            <div class="font_14 color_01">选择账户</div>
                        </div>
                        <div class="scence_search">
                            <el-input placeholder="账户名称、账户 ID 搜索" size="small" clearable prefix-icon="el-icon-search" v-model="query">
                            </el-input>
                        </div>
                        <div class="scence_height">
                            <el-checkbox-group v-model="editForm.xingtu" class="talent_check" @change="setSessionStorage">
                                <el-checkbox :label="item.starId" v-for="item in filteredData(xingtuList,query)" :key="item.starId">
                                    <div class="flex flexbox flexcenter">
                                        <div class="talent_info flex">
                                            <div class="talent_name">{{item.starName}}</div>
                                            <div class="talent_fans">
                                                <span>ID：{{item.starId}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="scence_right">
                        <div class="scence_head flexbox flexcenter flexbetween">
                            <div class="font_14 color_01">已选账户</div>
                            <el-link type="primary" :underline="false" @click="clearBrand">清空</el-link>
                        </div>
                        <div class="scence_has">
                            <div class="has_item flexbox flexcenter flexbetween" v-for="item in selectBrand" :key="item.id">
                                <div class="font_14">
                                    <div class="color_01 line_one">{{item.starName}}</div>
                                    <div class="color_02">ID：{{item.starId}}</div>
                                </div>
                                <el-link :underline="false" icon="el-icon-close" style="margin-left:5px" @click="delBrand(item)"></el-link>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <!-- <el-form-item label="星图任务金额" prop="xingtu_cost" :rules="addRules.checkFloat">
                <el-input v-model="editForm.xingtu_cost" placeholder="请输入星图任务金额" style="width:220px" @change="setSessionStorage">
                    <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                </el-input>
            </el-form-item> -->
            <el-form-item label="服务费比例" prop="xingtu_ratio" :rules="addRules.checkFloat">
                <el-input v-model="editForm.xingtu_ratio" placeholder="请设置返点比例" style="width:220px" @change="setSessionStorage">
                    <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                </el-input>
            </el-form-item>
            <!-- <el-form-item label="返点金额">
                <div class="font_14 color_01">￥{{this.getXingtuMoney}}</div>
            </el-form-item> -->
        </div>
        <div class="com_box pd_box">
            <div class="pro_title">追投服务费</div>
            <el-form-item label="千川-随心推比例" prop="qc_radio" :rules="addRules.checkFloat" class="set_style">
                <el-input v-model="editForm.qc_radio" placeholder="请输入" style="width:220px" @change="setSessionStorage">
                    <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                </el-input>
            </el-form-item>
            <el-form-item label="DOU+">
                <div class="flexbox flexcenter">
                    <el-form-item prop="dou_cost" :rules="addRules.checkFloat">
                        <el-input v-model="editForm.dou_cost" placeholder="请输入" style="width:220px" @change="setSessionStorage">
                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="dou_ratio" :rules="addRules.checkFloat" style="margin-left:12px">
                        <el-input v-model="editForm.dou_ratio" placeholder="返点比例" style="width:120px" @change="setSessionStorage">
                            <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                        </el-input>
                    </el-form-item>
                    <div class="font_14 color_01" style="margin-left:12px">￥{{this.getDouMoney}}</div>
                </div>
            </el-form-item>
            <!-- <el-form-item label="内容热推">
                <div class="flexbox flexcenter">
                    <el-form-item prop="content_cost" :rules="addRules.checkFloat">
                        <el-input v-model="editForm.content_cost" placeholder="请输入" style="width:220px" @change="setSessionStorage">
                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="content_ratio" :rules="addRules.checkFloat" style="margin-left:12px">
                        <el-input v-model="editForm.content_ratio" placeholder="返点比例" style="width:120px" @change="setSessionStorage">
                            <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                        </el-input>
                    </el-form-item>
                    <div class="font_14 color_01" style="margin-left:12px">￥{{this.getContentMoney}}</div>
                </div>
            </el-form-item> -->
        </div>
        <div class="com_box pd_20 mb_12">
            <div class="head_stra flexbox flexcenter">
                <div class="has_check flexbox flexcenter flexbetween" v-if="hasPlanData.length>0">
                    <div class="has_ch_left">
                        <span class="has_text">已选中{{hasPlanData.length}}项</span>
                        <span class="has_btn" @click="batchDeletPlan">删除</span>
                    </div>
                    <div class="close_check" @click="closeHasPlanCheck">
                        <img src="../../assets/img/close_check.svg" alt="">
                    </div>
                </div>
                <div class="flexbox flex flexcenter flexbetween" v-else>
                    <div class="pro_title">绑定追投账户</div>
                    <el-button plain class="plain_blue" icon="el-icon-circle-plus-outline" size="small" @click="addProUser()">添加账户</el-button>
                </div>
            </div>
            <el-table :data="editForm.advertiser" ref="planRef" height="300" class="com_table" :row-key="(row)=>{ return row.advertiser_id}" @selection-change="selectGroup">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="advertiser_id" label="账户ID" width="250">
                </el-table-column>
                <el-table-column prop="advertiser_name" label="账户名称">
                </el-table-column>
                <el-table-column prop="stat_cost" label="操作" width="88">
                    <template slot-scope="scope">
                        <el-link type="danger" :underline="false" @click="deletPlan(scope.$index)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="com_box pd_20 mb_12">
            <div class="head_stra flexbox flexcenter">
                <div class="has_check flexbox flexcenter flexbetween" v-if="hasGoodsData.length>0">
                    <div class="has_ch_left">
                        <span class="has_text">已选中{{hasGoodsData.length}}项</span>
                        <span class="has_btn" @click="batchDeletGoods">删除</span>
                    </div>
                    <div class="close_check" @click="closeHasGoodsCheck">
                        <img src="../../assets/img/close_check.svg" alt="">
                    </div>
                </div>
                <div class="flexbox flex flexcenter flexbetween" v-else>
                    <div class="pro_title flexbox flexcenter">绑定商品 <span class="goos_tips">Tips：需先绑定追投账户，才可做商品绑定</span></div>
                    <el-button plain class="plain_blue" icon="el-icon-circle-plus-outline" size="small" @click="addGoods()">添加商品</el-button>
                </div>
            </div>
            <el-table :data="editForm.product" ref="goodsRef" height="300" class="com_table" :row-key="(row)=>{ return row.product_id}" @selection-change="selectGoods">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="product_name" label="商品名称" width="350">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <img :src="scope.row.img" alt="" class="goods_img">
                            <div class="goods_name">{{scope.row.product_name}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="product_id" label="商品 ID">
                </el-table-column>
                <el-table-column prop="stat_cost" label="操作" width="88">
                    <template slot-scope="scope">
                        <el-link type="danger" :underline="false" @click="deletGoods(scope.$index)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    props: ["editForm", "userList", "addRules","xingtuList"],
    name: "",
    data() {
        return {
            query:"",
            hasPlanData: [],
            hasGoodsData: [],
        };
    },
    created() {},
    computed: {
        getXingtuMoney() {
            return (
                this.editForm.xingtu_cost * (this.editForm.xingtu_ratio / 100)
            );
        },
        getDouMoney() {
            return this.editForm.dou_cost * (this.editForm.dou_ratio / 100);
        },
        getContentMoney() {
            return (
                this.editForm.content_cost * (this.editForm.content_ratio / 100)
            );
        },
        selectBrand(){
            let arr = []
            for(let i in this.xingtuList){
                for(let a in this.editForm.xingtu){
                    if(this.xingtuList[i].starId==this.editForm.xingtu[a]){
                        arr.push(this.xingtuList[i])
                    }
                }
            }
            return arr
        },
    },
    methods: {
        // 添加项目人员
        addUser() {
            this.editForm.member.push({
                user_id: null,
                priority: 0,
            });
            this.setSessionStorage();
        },
        // 删除项目人员
        delUser(index) {
            this.editForm.member.splice(index, 1);
            this.setSessionStorage();
        },

        // 添加广告主
        addProUser() {
            this.$emit("addProUser");
        },
        // 删除广告主
        deletPlan(index) {
            this.editForm.advertiser.splice(index, 1);
            this.setSessionStorage();
        },
        // 批量删除广告主
        batchDeletPlan() {
            for (let i in this.editForm.advertiser) {
                for (let a in this.hasPlanData) {
                    if (
                        this.editForm.advertiser[i].advertiser_id ==
                        this.hasPlanData[a].advertiser_id
                    ) {
                        this.editForm.advertiser.splice(i, 1);
                    }
                }
            }
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
            this.setSessionStorage();
        },
        // 选择广告主
        selectGroup(v) {
            this.hasPlanData = v;
        },
        // 关闭已选广告主
        closeHasPlanCheck() {
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 添加商品
        addGoods() {
            this.$emit("addGoods");
        },

        // 删除商品
        deletGoods(index) {
            this.editForm.product.splice(index, 1);
            this.setSessionStorage();
        },
        // 批量删除商品
        batchDeletGoods() {
            for (let i in this.editForm.product) {
                for (let a in this.hasGoodsData) {
                    if (
                        this.editForm.product[i].product_id ==
                        this.hasGoodsData[a].product_id
                    ) {
                        this.editForm.product.splice(i, 1);
                    }
                }
            }
            this.closeHasGoodsCheck();
            this.setSessionStorage();
        },
        // 选择商品
        selectGoods(v) {
            this.hasGoodsData = v;
        },
        // 关闭已选商品
        closeHasGoodsCheck() {
            this.hasGoodsData = [];
            this.$refs.goodsRef.clearSelection();
        },

        // 删除
        delBrand(item){
            let index =  this.editForm.xingtu.findIndex(val=>val==item.starId)
            if(index!=-1){
                this.editForm.xingtu.splice(index,1)
            }
            this.setSessionStorage()
        },
        // 清空
        clearBrand(){
            this.editForm.xingtu = []
            this.setSessionStorage()
        },
        // 筛选
        filteredData(list, query) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if(!item.starName){
                    return
                }
                if (
                    item.starName.indexOf(query) !== -1 ||
                    item.starId == query
                ) {
                    return item;
                }
            });
            return list;
        },

        setSessionStorage() {
            this.$emit("setSessionStorage");
        },
    },
    components: {},
};
</script>


<style scoped>
.pd_box {
    padding: 0 20px;
    overflow: hidden;
    margin-bottom: 12px;
}
.pro_title {
    font-weight: bold;
    font-size: 16px;
    height: 56px;
    line-height: 56px;
}

.member_box {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    padding: 16px 20px;
}
.mem_title {
    width: 88px;
    font-size: 14px;
    color: #17233d;
}
.member_item {
    margin-top: 12px;
}
.member_tag {
    background: rgba(165, 177, 209, 0.05);
    border-radius: 2px;
    width: 60px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    font-size: 13px;
    color: #616c85;
    margin-left: 12px;
}
.icon_btn {
    margin-left: 12px;
}
.goos_tips {
    font-size: 13px;
    color: #b4b7bd;
    margin-left: 13px;
    font-weight: normal;
}
.goods_img {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 2px;
}
.goods_name {
    font-size: 14px;
    color: #17233d;
    margin-left: 20px;
}
.line_one{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
</style>

<style>
.revenue_form .el-form-item__label {
    color: #616c85 !important;
}
.revenue_form .el-form-item__label {
    line-height: 16px !important;
    margin-top: 7px;
}
.revenue_form .set_style .el-form-item__label {
    margin-top: 0;
}
</style>

